<template>
<input v-bind:value="value" 
    :[attr]="{success: isOk, error: !isOk}" 
    @input="inputFn" @blur="blurFn" class="hmInput" type="text">
</template>

<script>
export default {
    props: {
        value: [String, Number], // 表示value即可以是字符串也可以是数字类型
        reg: {
            type: RegExp,
            default: ()=>{
                // 设置正则的默认值，对于复杂数据类型，props规则必须使用函数返回
                return /^.{1,}$/
            }
        }
    },
    data(){
        return {
            isOk: true, // true表示用户输入的内容正确，false表示输入内容错误
            attr: ""    /// 表示将来要设置标签的属性名
        }
    },
    created(){
        // 设置isOk的初始值
        // 判断输入框中的默认值是否正确，正确的话给isOk设置值为true，否则false
        if(this.reg.test(this.value)){
            this.isOk = true;
        }else{
            this.isOk = false;
        }
    },
    methods: {
        // 失去焦点时触发的函数
        blurFn(){
            // 动态给输入框绑定类这个属性
            this.attr = "class";
            // console.log(13,this.value);
            // let reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
            // reg.test方法是正则内置方法，返回为true表示校验通过，否则校验不通过
            if(this.reg.test(this.value)){
                this.isOk = true;
            }else{
                this.isOk = false;
            }
        },
        // 实时监听输入框内容的变化
        inputFn(e){
            // console.log(40,e.target.value);// 获取到输入框的值
            // 子传父，通知父组件修改对应数据的值   
            this.$emit("input",e.target.value);
        }
    }
}
</script>

<style lang="less" scoped>
.hmInput{
    width: 100%;
    border:none;
    border-bottom: 1px solid #666;
    color: #666;
    line-height: 2;
    font-size: 16px;
}
.success{
    color: green;
    border-bottom-color: green;
}
.error{
    color: red;
    border-bottom-color: red;
}
</style>